<script setup>
import {onMounted, ref} from "vue";
import {approveStoreById, listPendingStores, rejectStoreById} from "@/api/store";
import {ElMessage, ElMessageBox} from "element-plus";
import {getCurrentAdminInfo} from "@/api/admin";
import {sendMsg} from "@/api/auditMessage";
import router from "@/router";

onMounted(() => {
  getPendingStores();
  getCurrentAdminId();
});

const curAdminId = ref();
const stores = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const detailsVisible = ref(false);
const curStore = ref({});

// 获取当前管理员ID
const getCurrentAdminId = () => {
  getCurrentAdminInfo().then(res => {
    if (res.data) {
      curAdminId.value = res.data.id;
    } else {
      ElMessage.error("获取管理员信息失败，请登录");
      router.push("/AdminLoginPage");
    }
  });
};

// 获取待审核店铺列表
const getPendingStores = () => {
  const query = {
    pageNo: pageNo.value,
    pageSize: pageSize.value
  };
  listPendingStores(query).then(res => {
    if (res.data) {
      stores.value = res.data.records;
      total.value = res.data.total;
    } else {
      console.error("获取待审核商家列表失败");
    }
  });
};

// 审核通过
const approveStore = (storeId) => {
  approveStoreById(storeId).then(res => {
    if (res.data) {
      ElMessage.success("操作成功，已批准");
      getPendingStores();
    } else {
      ElMessage.error("操作失败，请稍后再试");
    }
    detailsVisible.value = false;
  });
};

// 审核不通过
const rejectStore = (store) => {
  ElMessageBox.prompt('请输入审核不通过原因', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /.+/,
    inputErrorMessage: '此项必填',
  }).then(({ value }) => {
    const msg = {
      adminId: curAdminId.value,
      merchantId: store.merchantId,
      storeId: store.id,
      message: value
    }
    rejectStoreById(store.id).then(res => {
      if (res.data) {
        ElMessage.success("操作成功，已拒绝");
        getPendingStores();
      } else {
        ElMessage.error("操作失败，请稍后再试");
      }
      detailsVisible.value = false;
    })
    sendMsg(msg).then(res => {
      if (res.data) {
        ElMessage.success("审核消息已发送");
        getPendingStores();
      } else {
        ElMessage.error("操作失败，请稍后再试");
      }
    });
    detailsVisible.value = false;
  }).catch(() => {
    ElMessage.info("已取消操作");
  });
};

// 查看详情
const showDetails = (row) => {
  curStore.value = row;
  detailsVisible.value = true;
};

// 分页器事件
const pageNoChange = (value) => {
  pageNo.value = value;
  getPendingStores();
};

const pageSizeChange = (value) => {
  pageSize.value = value;
  getPendingStores();
};
</script>

<template>
  <el-card class="page-container">
    <div class="page-header">
      <h3>审核管理</h3>
      <p class="header-desc">待审核店铺列表，点击查看详情进行审核操作</p>
    </div>

    <div class="page-content">
      <el-table
          :data="stores"
          class="table"
          border
          stripe
          :row-class-name="(_, index) => index % 2 === 0 ? 'table-row-even' : ''"
      >
        <el-table-column label="店铺名称" prop="name" width="200" />
        <el-table-column label="店铺描述" prop="description" />
        <el-table-column label="联系方式" prop="contactInfo"/>
        <el-table-column label="开店日期" prop="joinedAt" />
        <el-table-column label="操作" width="300px">
          <template #default="scope">
            <el-button
                type="primary"
                @click="showDetails(scope.row)"
                size="small"
                class="view-btn"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChange"
            @current-change="pageNoChange"
        />
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
        v-model="detailsVisible"
        title="店铺详情"
        width="600px"
        :before-close="() => detailsVisible = false"
    >
      <div class="dialog-content">
        <div class="detail-section">
          <h4 class="section-title">基本信息</h4>
          <div class="detail-row">
            <span class="detail-label">店铺名称：</span>
            <span class="detail-value">{{ curStore.name }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">店铺类别：</span>
            <span class="detail-value">{{ curStore.category }} / {{ curStore.subCategory }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">申请日期：</span>
            <span class="detail-value">{{ curStore.joinedAt }}</span>
          </div>
        </div>

        <div class="detail-section">
          <h4 class="section-title">店铺信息</h4>
          <div class="detail-row">
            <span class="detail-label">店铺描述：</span>
            <span class="detail-value">{{ curStore.description || '无' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">店铺地址：</span>
            <span class="detail-value">{{ curStore.address || '无' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">营业时间：</span>
            <span class="detail-value">{{ curStore.openingHours || '无' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">联系方式：</span>
            <span class="detail-value">{{ curStore.contactInfo || '无' }}</span>
          </div>
        </div>

        <div class="detail-section">
          <h4 class="section-title">店铺标签</h4>
          <div class="tags-container">
            <el-tag
                v-for="tag in curStore.tags"
                :key="tag"
                type="primary"
                class="tag"
                size="small"
            >
              {{ tag }}
            </el-tag>
            <span v-if="!curStore.tags || curStore.tags.length === 0" class="no-tags">无标签</span>
          </div>
        </div>

        <div class="detail-section">
          <h4 class="section-title">营业执照</h4>
          <div class="license-container">
            <el-image
                :src="curStore.license || require('@/assets/default-license.png')"
                :preview-src-list="[curStore.license || require('@/assets/default-license.png')]"
                fit="contain"
                class="license-image"
                fallback="图片加载失败"
            />
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button
              type="success"
              @click="approveStore(curStore.id)"
              class="approve-btn"
          >
            通过
          </el-button>
          <el-button
              type="danger"
              @click="rejectStore(curStore)"
              class="reject-btn"
          >
            不通过
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

<style scoped lang="scss">
// 颜色变量
$primary: #1E40AF;
$primary-light: #3B82F6;
$primary-glass: rgba(30, 64, 175, 0.1);
$text-primary: #1E293B;
$text-secondary: #64748B;
$text-tertiary: #94A3B8;
$bg-light: #F8FAFC;
$white: #FFFFFF;
$border-color: #E2E8F0;
$success: #10B981;
$danger: #EF4444;
$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.page-container {
  margin: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.page-header {
  padding: 20px 24px;
  border-bottom: 1px solid $border-color;

  h3 {
    margin: 0;
    color: $text-primary;
    font-size: 20px;
    font-weight: 600;
  }

  .header-desc {
    margin-top: 6px;
    color: $text-secondary;
    font-size: 14px;
  }
}

.page-content {
  padding: 24px;

  .table {
    width: 100%;
    margin-bottom: 24px;

    .table-row-even {
      background-color: rgba(248, 250, 252, 0.5);
    }

    th {
      background-color: $bg-light;
      font-weight: 500;
      color: $text-primary;
    }

    td {
      color: $text-primary;
      transition: $transition;

      &:hover {
        background-color: rgba(30, 64, 175, 0.02);
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }

  .view-btn {
    background-color: $primary;
    border-color: $primary;

    &:hover {
      background-color: $primary-light;
      border-color: $primary-light;
    }
  }
}

// 详情对话框样式
.dialog-content {
  padding: 10px 0;

  .detail-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed $border-color;

    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .section-title {
      margin: 0 0 15px;
      padding-left: 5px;
      color: $primary;
      font-size: 16px;
      font-weight: 500;
      border-left: 3px solid $primary;
    }
  }

  .detail-row {
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;

    .detail-label {
      flex: 0 0 120px;
      color: $text-secondary;
      font-weight: 500;
    }

    .detail-value {
      flex: 1;
      color: $text-primary;
      word-break: break-word;
    }
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 5px 0;

    .tag {
      background-color: $primary-glass;
      color: $primary;
      border-color: $primary-glass;

      &:hover {
        background-color: rgba(30, 64, 175, 0.2);
      }
    }

    .no-tags {
      color: $text-tertiary;
      font-size: 14px;
    }
  }

  .license-container {
    margin-top: 10px;

    .license-image {
      max-width: 100%;
      max-height: 300px;
      border-radius: 4px;
      cursor: zoom-in;
      transition: $transition;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: scale(1.01);
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  .approve-btn {
    background-color: $success;
    border-color: $success;

    &:hover {
      background-color: #059669;
      border-color: #059669;
    }
  }

  .reject-btn {
    background-color: $danger;
    border-color: $danger;

    &:hover {
      background-color: #DC2626;
      border-color: #DC2626;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .dialog-content {
    .detail-row {
      .detail-label {
        flex: 0 0 100px;
      }
    }
  }
}

@media (max-width: 576px) {
  .page-header {
    padding: 16px;
  }

  .page-content {
    padding: 12px;
  }

  .dialog-content {
    .detail-row {
      flex-direction: column;

      .detail-label {
        margin-bottom: 4px;
        flex: none;
      }
    }
  }
}
</style>
